@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

/* Explicit theme overrides */
.theme-light {
  --background: #ffffff;
  --foreground: #171717;
}

.theme-dark {
  --background: #0a0a0a;
  --foreground: #ededed;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* JSON syntax highlighting */
.json-key { color: #1f6feb; font-weight: 600; }
.json-string { color: #0a7a0a; }
.json-number { color: #a626a4; }
.json-boolean { color: #b58900; }
.json-null { color: #6c757d; font-style: italic; }

/* Simple fade in up */
@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 160ms ease-out; }
